import { createBrowserRouter, Navigate, type RouteObject } from 'react-router-dom'
import Login from '@/pages/login'
import { lazy, Suspense } from 'react'
import type { ReactNode } from 'react'
import { Spin } from 'antd'
import { HomeOutlined } from '@ant-design/icons'
import Home from '@/pages/home'
import UseDetail from '@/pages/user/useDetail'
import Setup from '@/pages/setup'
import UserList from '@/pages/user/userList'
import Error401 from '@/pages/401'

// 更精确的类型定义
export interface RouteItem {
    path?: string
    element?: ReactNode
    layout?: boolean
    label?: string
    icon?: ReactNode
    children?: RouteItem[]
    index?: boolean
    errorElement?: ReactNode
    loader?: any
    action?: any
    key?: string
    search?: string
    handle?: any
    onClick?: () => void
}

// 全局路由
function globalRoute() {
    const Layout = lazy(() => import('@/components/layout'))
    const arr: RouteItem[] = [
        {
            // 精确匹配"/login"，跳转Login页面
            path: '/login',
            element: <Login/>,
        },
        {
            path: '/401',
            element: <Error401 />, // 添加401页面路由
        },
        {
            path: '/',
            layout: true,
            element: (
                // 懒加载过程中先使用Spin组件占位
                <Suspense fallback={<div style={{height: '100vh'}}><Spin  style={{width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center'}}/></div>}>
                    <Layout />
                </Suspense>
            ),
            children: [
                {
                    // 精确匹配"/home"，跳转Home页面
                    path: '/home',
                    element: <Home />,
                    layout: true,
                    label: '首页',
                    icon: <HomeOutlined />,
                    handle: { breadcrumb: { title: '首页' } },
                },
                {
                    path: '/user',
                    layout: true,
                    label: '用户',
                    icon: <HomeOutlined />,
                    handle: { breadcrumb: { title: '用户' }, access: ['operations'] },
                    children: [
                        {
                            index: true,
                            element: <Navigate to="/user/list" replace />,
                        },
                        {
                            path: '/user/list',
                            element: <UserList />,
                            layout: true,
                            label: '用户列表',
                            handle: { breadcrumb: { title: '用户列表' }, access: ['operations'] }
                        },
                        {
                            path: '/user/useDetail',
                            element: <UseDetail />,
                            layout: false,
                            label: '用户详情',
                            handle: {
                                access: ['operations'],
                                breadcrumb: {
                                    parent: '/user/list',
                                    title: '用户详情'
                                }
                            }
                        }
                    ]
                },
                {
                    path: '/setup',
                    element: <Setup/>,
                    layout: true,
                    label: '设置',
                    icon: <HomeOutlined />,
                    handle: { breadcrumb: { title: '设置' }, access: ['admin'] }
                },
                {
                    // 如果URL没有"#路由"，跳转Home页面
                    path: '/',
                    element: <Navigate to="/home" />,
                },
                {
                    // 未匹配，跳转Login页面
                    path: '*',
                    element: <Navigate to="/login" />,
                },
            ]
        }
    ]
    return createBrowserRouter(arr as RouteObject[])
}

const globalRouter = globalRoute()

export default globalRouter